<template>
	<view class="dq_goods_detail">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
			indicator-active-color="#BEBEBE" class="swiper">
			<swiper-item v-for="(item,index) in goods_info.data.pics" :key="item.pics_id">
				<view class="swiper-item" @click="preview(index)">
					<image :src="item.pics_big" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<goods_detail :price="goods_info.data.goods_price" :text='goods_info.data.goods_name'></goods_detail>
		<rich-text :nodes="goods_info.data.goods_introduce" v-if="goods_info.data.goods_price"></rich-text>
	</view>
	<view class="goodsList_nav">
		<cate></cate>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import goods_detail from "../../components/goods_detail/goods_detail.vue"
	import cate from "../../components/cate/cate.vue"
	// 商品详情
	const goods_info = reactive({
		data: {}
	})
	// 获取商品详情信息
	const getGoods_info = async (goods_id) => {
		const res = await uni.$http.get("/api/public/v1/goods/detail", {
			goods_id
		})
		if (res.data.meta.status !== 200) return uni.$showMsg();
		goods_info.data = res.data.message
		goods_info.data.goods_introduce = goods_info.data.goods_introduce.replace(/<img /g,
			'<img style="display:block;" ')
		console.log(goods_info.data);
	}
	// 预览图片
	const preview = (index) => {
		uni.previewImage({
			urls: goods_info.data.pics.map(item => item.pics_big),
			current: index,
		})
	}
	// 页面刷新
	onLoad((options) => {
		getGoods_info(options.goods_id)
	})
</script>

<style lang="scss" scoped>
	.swiper {
		width: 100%;
		height: 750rpx;

		.swiper-item {
			width: 100%;

			image {
				width: 100%;
			}
		}
	}
	.goodsList_nav{
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	.dq_goods_detail{
		margin-bottom: 50px;
	}
</style>
